<!-- 子页面 -->
<template>
  <div v-if="route.query.type == 'watermark'" class="watermark2">众焰水印</div>
  <div v-else class="watermark">预览水印</div>
  <div class="box">
    <div class="common-navigation" ref="navigation">
      <div class="navigation-logo">
        <img src="@/assets/img/众焰红.png" style="height: 6vh;">
        <!-- <img src="@/assets/img/logo-white2.png" style="height: 6vh;"> -->
      </div>
      <div class="navigation-list">
        <ul>
          <li>{{ route.query.parentName }}</li>
        </ul>
      </div>

      <div class="navigation-search">
        <input type="text" placeholder="搜索">
      </div>
    </div>

    <div style="background-color: #28245E;">
      <img style="width: 100vw;object-fit: cover;" src="@/assets/img/news_bg.png" />
    </div>
    <div class="location">
      <div>{{ route.query.parentName}} > <span style="font-weight: 200;">{{ sonName }}</span></div>
      <div style="font-weight: 100;font-family: 'Alumni Sans SC';">WELCOME TO ANSTEEL</div>
    </div>
    <div style="position: absolute;top:25vh;">
      <div class="catalogue">
        <div v-for="(item,index) in titleList" :key="item.id" :class="item.active?'catalogue-item active':'catalogue-item'" @click="menuSelect(item,index)" @mouseover="handleMouseOver(item, index, $event)" @mouseleave="handleMouseLeave">
          <span class="smooth-bold">{{ item.name }}</span>
        </div>
      </div>
      <div v-if="threeShow" class="threeCatalog" :style="threeCatalogStyle" @mouseenter="handleThreeCatalogEnter" @mouseleave="handleThreeCatalogLeave">
        <div v-for="(item,index) in threeCatalogList" @click="threeMenuSelect(item,index)" :key="item.id" class="threeCatalog-item">
          {{ item.name }}
        </div>
      </div>
      <div style="min-height: 60vh;">
        <Details v-if="route.query.type=='details'"></Details>
        <div v-else style="width: 100%;">
          <!-- 全内容 -->
          <div v-if="templateType==1" v-html="contentArr[0]?contentArr[0].content:''" style=""></div>
          <!-- 列表1 -->
          <ListTemplateOne ref="listTemplateOne" v-if="templateType==2" :contentArr="contentArr"></ListTemplateOne>
          <!-- 列表2 -->
          <ListTemplate ref="listTemplate" v-if="templateType==3" :contentArr="contentArr"></ListTemplate>
          <!-- 图文2 -->
          <BoardDirectors ref="boardDirectors" v-if="templateType==5" :contentArr="contentArr"></BoardDirectors>
        </div>
      </div>

      <div class="common-bottom">
        <div class="white">
          <img src="@/assets/img/众焰红.png" alt="" style="width: 8vw;height: auto;object-fit: contain;margin-left:5vw;">
          <!-- <img src="@/assets/img/logo4.svg" alt="" style="width: 8vw;height: auto;object-fit: contain;margin-left:5vw;"> -->
          <div class="white-intro">
            <p style="font-weight: bold;line-height: 3;">官网介绍</p>
            <!-- <p style="font-weight: bold;line-height: 3;">关于鞍钢</p> -->
            <p style="line-height: 2;">在数字化时代，官网作为企业、组织或个人展示形象、传递信息、开展业务的重要窗口，其重要性不言而喻。官网系统正是为满足各类用户对于高效、专业、个性化官网建设需求而打造的一站式解决方案。</p>
            <!-- <p style="line-height: 2;">鞍钢集团（简称鞍钢）于2010年5月由鞍山钢铁集团公司和攀钢集团有限公司联合重组而成，是国务院国有资产监督管理委员会监管的中央企业，总部坐落在辽宁省鞍山市。</p> -->
          </div>
          <div class="white-website">
            <p style="font-weight: bold;line-height: 3;">相关网站</p>
            <div style="line-height: 2;display: grid;grid-template-columns: repeat(2, 15vw);">
              <a v-for="item in linkList" :key="item.id" :href="item.url" class="white-website-url">{{ item.name }}</a>
              <div class="white-website-url">更多>></div>
            </div>
          </div>
        </div>
        <div class="black">
          <div style="display: flex;">
            <div>&copy;2022 网站网站网站</div>
            <div style="margin-left:1vw;">*建议使用IE9以上版本浏览器</div>
            <div style="display: flex;margin-left:1vw;">
              <div style="margin-right: 0.3vw;">友情链接</div>
              <!-- <div style="cursor: pointer;margin:0 0.2vw;">国家政委</div>|
              <div style="cursor: pointer;margin:0 0.2vw;">钢铁行业</div>|
              <div style="cursor: pointer;margin:0 0.2vw;">钢铁信息</div> -->
            </div>
          </div>
          <div>
            <a href="http://www.ansteel.cn/sitemap.html">网站地图</a>
            |
            <a href="http://www.ansteel.cn/statement.html">法律声明</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
      
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { sonColumn, friendLink, getContent } from '@/api/allApi'
import { useRoute } from 'vue-router'
import Details from './Details.vue'
import ListTemplate from './ListTemplate.vue'
import ListTemplateOne from './ListTemplateOne.vue'
import BoardDirectors from './BoardDirectors.vue'

// 声明子组件引用
const listTemplateOne = ref<{ handleScroll: (event: Event) => void }>()
const listTemplate = ref<{ handleScroll: (event: Event) => void }>()
const route = useRoute()

onMounted(() => {
	if (route.query.type == 'column') {
		getTwoColumnList()
	} else if (route.query.type == 'all') {
		getContent({ webSiteId: 1, id: route.query.sonId, type: 2 }).then(res => {
			templateType.value = res.data.templateType
			contentArr.value = res.data.data
		})
	} else if (['1', '2', '3', '4', '5'].includes(route.query.type)) {
		templateType.value = Number(route.query.type)
		for (let i = 0; i < 5; i++) {
			contentArr.value.push({
				content: '模板预览的内容，应该挺多字的，但我实在不知道该编啥了，就先这样吧。',
				imageUrl: new URL(`@/assets/login.jpg`, import.meta.url).href,
				title: '模板预览的标题',
				linkTitle: '模板预览'
			})
		}
	}else if(route.query.type == 'watermark'){
        return
    }
	const container = document.querySelector('.box')
	container?.addEventListener('scroll', handleScroll)
})
onBeforeUnmount(() => {
	const container = document.querySelector('.box')
	container?.removeEventListener('scroll', handleScroll)
	if (hideTimer.value) clearTimeout(hideTimer.value)
})

const templateType = ref(0)
const contentArr = ref([])
const sonName = ref('')
const titleList = ref([])
const getTwoColumnList = () => {
	//根据父栏目获取子栏目
	sonColumn({
		parentId: route.query.parentId,
		type: 2 //预览
	}).then(res => {
		//子栏目点击样式初始化
		titleList.value = res.data.map(item => ({ ...item, active: false }))
		//有currentId是栏目审核里的预览，不一定是几级栏目
		if (route.query.currentId) {
			const recursion = children => {
				children.forEach((e, i) => {
					if (e.id == route.query.currentId) {
						e.active = true
						menuSelect(e)
					} else {
						if (e.children && e.children.length > 0) {
							recursion(e.children)
						}
					}
				})
			}
			recursion(titleList.value)
		} else {
			menuSelect(titleList.value[0])
		}
	})
}
const menuSelect = item => {
	let param = {
		webSiteId: 1,
		id: item.id,
		type: 2 //预览
	}
	sonName.value = item.name
	if (item.children && item.children.length > 0) {
		sonName.value = item.children[0].name
		param.id = item.children[0].id
	}
	//点击子栏目更改样式
	titleList.value.forEach((e, i) => (e.active = e.id == item.id))
	//通过子栏目id获取内容
	getContent(param).then(res => {
		templateType.value = res.data.templateType
		contentArr.value = res.data.data
	})
}
const threeShow = ref(false)
const threeCatalogStyle = ref({
	left: '0',
	right: 'auto'
})
const threeCatalogList = ref([])
const hideTimer = ref<number | null>(null)
const handleMouseOver = (item: MenuItem, index: number, event: MouseEvent) => {
	if (item.children?.length) {
		clearTimer()
		threeShow.value = true
		threeCatalogList.value = item.children

		const target = event.currentTarget as HTMLElement
		const rect = target.getBoundingClientRect()
		const viewportWidth = window.innerWidth
		const threeCatalogWidth = 0.15 * viewportWidth // 15vw转换为像素

		// 计算菜单右侧边界
		const menuRightEdge = rect.left + threeCatalogWidth

		// 判断是否需要右对齐
		if (menuRightEdge > viewportWidth) {
			threeCatalogStyle.value = {
				left: 'auto',
				right: '1vw'
			}
		} else {
			threeCatalogStyle.value = {
				left: `${rect.left}px`,
				right: 'auto'
			}
		}
	}
}

const handleMouseLeave = () => {
	hideTimer.value = setTimeout(() => {
		threeShow.value = false
	}, 100)
}

const handleThreeCatalogEnter = () => clearTimer()
const handleThreeCatalogLeave = () => (threeShow.value = false)

const threeMenuSelect = (item: MenuItem) => {
	sonName.value = item.name
	titleList.value.forEach(e => (e.active = e.id === item.parentId))
	//通过子栏目id获取内容
	getContent({ webSiteId: 1, id: item.id, type: 2 }).then(res => {
		templateType.value = res.data.templateType
		contentArr.value = res.data.data
	})
}

const clearTimer = () => {
	if (hideTimer.value) {
		clearTimeout(hideTimer.value)
		hideTimer.value = null
	}
}

// 使用 ref 获取导航元素
const navigation = ref<HTMLElement | null>(null)
// 滚动处理函数
const handleScroll = (event: Event) => {
	if (route.query.type != 'details') {
		switch (templateType.value) {
			case 1:
				break
			case 2:
				listTemplateOne.value?.handleScroll(event)
				break
			case 3:
				listTemplate.value?.handleScroll(event)
				break
			case 4:
				break
		}
	}
	const target = event.target as HTMLElement
	const scrollTop = target.scrollTop
	if (navigation.value) {
		if (scrollTop > 200) {
			navigation.value.style.backgroundColor = '#28245e'
			navigation.value.style.boxShadow = '0 0 1vh 1vh rgba(0, 0, 0, 0.5)'
		} else {
			navigation.value.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'
			navigation.value.style.boxShadow = 'none'
		}
	}
}

const linkList = ref([])
const getLinkList = () => {
	// friendLink().then(res => {
	// 	linkList.value = []
	// 	for (let e of res) {
	// 		if ([4, 5, 6].includes(e.linkFlag)) {
	// 			linkList.value.push(e)
	// 		}
	// 	}
	// })
}
</script>
<style lang="scss" scoped>
//导航
.common-navigation {
	width: 100%;
	height: 6vh;
	background-color: rgba(255, 255, 255, 0.1);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	z-index: 1000;
	transition: 1.5s;
}

.navigation-logo {
	width: 7vw;
	display: flex;
	justify-content: center;
	margin-left: 2vw;
}

.navigation-list ul {
	list-style: none;
}

.navigation-list ul li,
.navigation-list a {
	display: inline-block;
	color: #fff;
	width: 7vw;
	text-align: center;
	text-decoration: none;
	transition: 0.6s;
	line-height: 5vh;
	font-size: 2vh;
	font-weight: bold;
}

.navigation-list ul li:hover,
.navigation-list a:hover {
	font-size: 2.5vh;
	font-weight: bolder;
	cursor: pointer;
}

.navigation-search input {
	position: absolute;
	right: 1.5vw;
	top: 1.25vh;
	width: 9vw;
	height: 0.8vh;
	padding: 1vh;
	border: none;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 2vh;
	border: 0.35vh solid #4a90e2;
	/* 设置选中时的边框样式 */
	outline: none;
	/* 移除默认的轮廓线样式 */
}

.navigation-search input::placeholder {
	/* color: #fff; */
	font-size: 1.5vh;
	text-align: center;
}

.navigation-search input:focus {
	border: 0.2vh solid #4a90e2;
	/* 设置选中时的边框样式 */
	outline: none;
	/* 移除默认的轮廓线样式 */
}
//中间
.box {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100vw;
	//   background-color: #2f44fa;
	height: 100vh;
}
.breadcrumb {
	height: 5vh;
	background-color: #5090fa;
	color: #fff;
	padding-left: 10vw;
	line-height: 5vh;
	margin-top: -1vh;
}
.center {
	width: 90vw;
	min-height: 80vh;
	margin-left: 5vw;
	padding: 5vh;
	display: flex;
}
.catalogue {
	width: 75vw;
	height: 15vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-left: auto;
	margin-right: 2vw;
}
.catalogue-item {
	height: 4vh;
	width: 7vw;
	text-align: center;
	line-height: 4vh;
	font-size: 2vh;
	transition: 0.5s;
	border-radius: 10vh;
	background-color: #fff;
	margin: 0 1vw 3vh;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.catalogue-item:hover {
	color: #28245e;
	font-weight: bold;
}
.active {
	background-color: rgba(0, 0, 0, 0);
	color: #fff;
	border: 1px solid #fff;
}
.active:hover {
	color: #fff;
}
.content {
	width: 100%; //修改过数值
	font-size: 2vh;
	line-height: 4vh;
	padding: 0vh 2vw;
}
//字体加粗
.thick {
	font-weight: bold;
}
//字体缩进
.retract {
	text-indent: 2em;
}

.location {
	font-size: 3.5vh;
	color: #ffffff;
	//   width:10vw;
	height: 10vh;
	position: absolute;
	z-index: 3;
	top: 25vh;
	left: 5vw;
}
.threeCatalog {
	color: #28245e;
	background-color: #f7f7f7;
	width: 15vw;
	height: 30vh;
	border-radius: 0.5vw;
	z-index: 1;
	position: absolute;
	top: 7vh;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	padding: 1vh;
}
.threeCatalog-item {
	height: 5vh;
	padding: 0 1vw;
	text-align: right;
	line-height: 5vh;
	transition: 0.5s;
}
.threeCatalog-item:hover {
	background-color: #d9def1;
}
//底
.common-bottom {
	width: 100vw;
	height: 30vh;
}
.white {
	width: 100vw;
	height: 25vh;
	color: #fff;
	background-color: #151240;
	display: flex;
	justify-content: space-between;
	padding: 1vh 5vw;
}
.white-intro {
	width: 20vw;
}
.white-website {
	width: 30vw;
}
.white-website-url {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.white-website-url:hover {
	//下划线
	text-decoration-line: underline;
	//下划线位置（不让他粘连）
	text-underline-position: under;
}
.black {
	width: 100vw;
	height: 5vh;
	color: #aeb7c6;
	background-color: #0a0828;
	display: flex;
	// justify-content: space-between;
	justify-content: space-around; //俩系统样式不一样，先改成这样
	line-height: 5vh;
	padding: 0 5vw;
	a {
		color: #aeb7c6;
		text-decoration: none;
	}
}

.watermark {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	font-size: 300px;
	opacity: 0.3;
	transform: translate(35%, 65%) rotate(-32deg);
}
.watermark2{
    position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	font-size: 100px;
	opacity: 0.3;
    color: #FF0000;
	transform: translate(35%, 65%) rotate(-32deg);
}
</style>
      